<style scoped>
.div_main{
  position: relative !important;
  background: transparent;
  height:100%;
  overflow: hidden;

  display: flex;
  flex-direction:column;
}
.div_m_head{
  text-align: center;
  height: 30px;
  padding: 16px;
  background-image: linear-gradient(to right, #4B8EFF, #3177FF);
  /*border: 1px red solid;*/
}
.div_m_body{
  padding-top: 20px;
  padding-left: 16px;
  padding-right: 16px;
  overflow-y: scroll;
  background-image: linear-gradient(to bottom, #f4f5f9, #d5e3fd 6%, #f4f5f9 30%,#f4f5f9);

  flex-grow: 1;
  /*border: 1px red solid;*/
}
.div_m_body::-webkit-scrollbar { width: 0; height: 0; }

.div_menu{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;

  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding-bottom: 0.2rem;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}
.div_menu_title{
  width: 100%;
  padding-left: 0.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0.2rem;
  font-size: 0.8rem;
  color: #999999;
}
.div_child_menu{
  width: 75px;
  height: 70px;
  margin-left: calc(20% - 60px);
  /*border-radius: 3px;*/
  /*box-shadow: 0px 0px 2px rgba(0,37,57,0.7);*/
  font-size: 0.7rem;
  color: #505968;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
</style>
<template>
  <div class="div_main">
    <div class="div_m_head" >
      <span style="color: #ffffff;font-size: 0.9rem;">工作台</span>
      <div style="float: right;">
        <van-image height="20" src="/images/mob-icon-menu-right.svg" />
      </div>
    </div>
    <div class="div_m_body">
      <div v-for="item in menuList" class="div_menu">
        <div v-if="item.name!=null" class="div_menu_title">{{item.name}}</div>
        <div v-if="item.name==null" style="width: 100%;height: 10px;"></div>
        <div v-for="cItem in item.child_list" class="div_child_menu"
             @click="clickMenu(cItem)">
          <van-image height="34" :src="cItem.mob_icon" />
          <div style="margin-top: 0.3rem;">{{cItem.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,

      menuList:[],
      s_menu:[],
    }
  },
  mounted() {
    this.v_GetMenu();
  },
  methods: {
    v_GetMenu:function(){
      let menuList = [];
      let s_menu = localStorage.getItem("s_menu");
      if(!this.em(s_menu) && s_menu.length>0){
        this.s_menu = s_menu.split(',');
      }
      s_menu = this.getS_Menu();
      let sMenu = {'name':'常用功能',child_list:[]};
      let tMenu = {'name':null,child_list:[]};
      menuList.push(tMenu);
      for(let i=0;i<elm.info.menu.length;i++){
        let item = elm.info.menu[i];
        item['mob_icon'] = this.v_GetMenuIcon(item.name);
        let childList = [];
        for(let kk=0;kk<elm.info.menu.length;kk++){
          let cItem = elm.info.menu[kk];
          if(cItem.pid==item.id && cItem.menu_display!='否'){
            cItem['mob_icon'] = this.v_GetMenuIcon(cItem.name);
            childList.push(cItem);
          }
        }
        if(childList.length>0 && item.menu_display!='否'){
          item['child_list'] = childList;
          menuList.push(item);
        }
        else if(item.pid=='0' && item.menu_display!='否'){
          tMenu.child_list.push(item);
        }

        for(let kk=0;kk<s_menu.length;kk++){
          if(item.name == s_menu[kk] && sMenu.child_list.length<4){
            sMenu.child_list.push(item);
          }
        }
      }
      if(true || sMenu.child_list.length>0){
        menuList.unshift(sMenu);
      }
      this.menuList = menuList;
      //console.log(this.menuList);
    },
    v_GetMenuIcon:function(name){
      let data = {
        '经营分析':'经营分析.svg','项目管理':'项目管理.svg','订单合同':'订单合同.svg','费用管理':'费用管理.svg',
        '请销假':'请销假.svg','请销假审核':'请销假审核.svg','出差申请':'出差申请.svg','出差审核':'出差审核.svg',
        '用车申请':'用车申请.svg','用车审核':'用车审核.svg','车辆管理':'车辆管理.svg',
        '客户订单':'客户订单.svg','收入合同':'收入合同.svg','支出合同':'支出合同.svg',
        '项目信息':'项目信息.svg','任务指派':'任务指派.svg','项目类型':'项目类型.svg',
        '报销':'报销.svg','报销审核':'报销审核.svg','结算':'结算.svg','收款':'收款.svg',
        '付款申请':'付款申请.svg','付款审核':'付款审核.svg','费用科目':'费用科目.svg',
      };
      let url = '/images/mob-menu-icon/00_default.svg';
      if(data[name]!=null){
        url = url.replace('00_default.svg',data[name]);
      }
      return url;
    },
    getS_Menu:function(){
      let data = [
        [],[],[],[],[],
        [],[],[],[],[],
        [],[],[],[],[],
        [],[],[],[],[],
      ];
      let s_menu = [];
      for(let i=0;i<this.s_menu.length;i++){
        let menu_name = this.s_menu[i];
        let found = false;
        for(let kk=0;kk<data.length;kk++){
          if(data[kk].length>0 && data[kk][0]==menu_name){
            data[kk].push(menu_name);
            found = true;
            kk = data.length + 1;
          }
        }
        if(!found){
          for(let kk=0;kk<data.length;kk++){
            if(data[kk].length==0){
              data[kk].push(menu_name);
              kk = data.length + 1;
            }
          }
        }
      }
      for(let i = 20;i>0;i--){
        for(let kk=0;kk<data.length;kk++){
          if(data[kk].length==i && s_menu.length<4){
            s_menu.push(data[kk][0]);
          }
        }
      }
      return s_menu;
    },
    clickMenu:function(data){
      this.s_menu.unshift(data.name);
      let list = [];
      for(let kk=0;kk<this.s_menu.length && list.length<12;kk++){
        list.push(this.s_menu[kk]);
      }
      localStorage.setItem("s_menu",list.join(','));
      let s_menu = localStorage.getItem("s_menu");

      this.$router.push({ path: data.navigateurl });
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
